<script lang="ts">
import { NInputNumber, NSpace } from 'naive-ui'
import { defineComponent, h, reactive, type PropType, toRaw } from 'vue'

type Value = [number | null, number | null]

export default defineComponent({
  name: 'DimensionInput',
  props: {
    value: {
      type: Array as unknown as PropType<Value>,
      default: () => [null, null]
    }
  },
  emits: ['update:value', 'updateValue'],
  setup(props, { emit }) {
    const value = reactive<Value>(toRaw(props.value))

    const handleUpdateValue = (index: number, v: number | null) => {
      value[index] = v
      emit('update:value', value)
      emit('updateValue', value)
    }

    const createIndexInput = (index: number) => {
      return h(NInputNumber, {
        value: props.value[index],
        onUpdateValue: (v) => handleUpdateValue(index, v),
        showButton: false,
        placeholder: '请输入'
      })
    }

    return () => {
      return h(
        NSpace,
        { wrap: false, align: 'center' },
        {
          default: () => [
            createIndexInput(0),
            h('span', { style: 'font-size: 16px' }, 'x'),
            createIndexInput(1),
            h('span', { style: 'font-size: 16px' }, 'cm')
          ]
        }
      )
    }
  }
})
</script>
